<template>
<my-div class="container">
  <div class="main" ref="main">
    <slot style="flex: 1"></slot>
  </div>
  <wxc-popup
      width="500"
      :show="is_show"
      @wxcPopupOverlayClicked="popupOverlayBottomClick"
      pos="left"
      >
    <my-div class="menu">

        <div class="user">
          <!-- <div class="user-avatar">

          </div> -->
          <div class="username">
            <my-text text="Airpay Counter" style="font-size:36px;"></my-text>
            <text style="font-size:24px;color:rgba(154,156,164,1);margin-top:16px;">Image Life App Design</text>
          </div>
        </div>
        <div class="operate">
          <div class="operate-item">
            <image style="width:44px;height:44px;" :src="`root:img/${theme}/home/zhuanru@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.coin')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
          <div class="operate-item">
            <image style="width:44px;height:44px;" :src="`root:img/${theme}/home/zhuanchu@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.point')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
          <div class="operate-item">
            <image style="width:44px;height:44px;" :src="`root:img/${theme}/home/huazhuan@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(206,195,183,1)" :text="$t('trade.transfer')" style="font-size:28px;margin-top:16px;"></my-text>
          </div>
        </div>
        <scroller class="scroller" :show-scrollbar="false">
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/account@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.account')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/dingdan_huaban@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.order')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/anquan-2@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.safety_Center')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="push('root:pages/my/locale.js',{page:'root:pages/home/index.js'})">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/yuyan@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.language_settings')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/wo-@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.aboutwe')" style="font-size:28px;margin-left:34px;"></my-text>
          </div>
          <div class="list-cell" @click="toggle_theme">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/tubiaozhizuomoban@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="theme_mode" style="font-size:28px;margin-left:34px;" ></my-text>
          </div>
        </scroller>
        <div class="set">
          <div class="list-cell">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/shezhi@2x.png`"></image>
            <my-text :text="$t('trade.set')" day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" style="font-size:30px;margin-left:10px;"></my-text>
          </div>
          <div class="list-cell" @click="logut">
            <image style="width:30px;height:26px;" :src="`root:img/${theme}/home/tuichu@2x.png`"></image>
            <my-text day_color="rgba(60,71,98,1)" night_color="rgba(187,177,166,1)" :text="$t('trade.sign_out')" style="font-size:30px;margin-left:10px;" ></my-text>
          </div>
        </div>
    </my-div>
   
</wxc-popup>
</my-div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #ffffff;
}
.main {
  flex: 1;
  background-color: #ffffff;
}
.menu {
  width: 500;
  flex: 1;
  position: absolute;
  top: 0;
  bottom: 0;
}
.scroller{
  margin-top: 16px;
  margin-left: 35;
  height: 624px;
}
.user-avatar{
  width: 100px;
  margin-left: 35;
  border-radius: 50%;
  background-color: #03A9F4;
}
.user{
  width: 380px;
  margin-top: 146px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.username{
  margin-left: 20px;
}
.operate{
  margin-top: 100px;
  margin-left: 35;
  width: 380px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.operate-item{
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-cell{
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  align-items: center;
}
.set{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 316px;
  height: 80px;
  margin-left: 35;
}
.item {
  color: #ffffff;
  font-size: 40;
}
.item_container {
  height: 60;
  width: 460;
  justify-content: center;
  align-items: center;
  margin-top: 35;
}
.block {
  width: 720;
  height: 350;
  background-color: #FF9800;
  margin: 15;
  border-radius: 15;
}

</style>

<script>
import { WxcPopup } from 'weex-ui';
module.exports = {
  data:function() {
    return {
        is_show:false
    }
  },
  computed: {
    theme_mode(){
      return this.theme === 'day'?'夜间模式':'日间模式'
    }
  },
  components:{WxcPopup},
  methods: {
    toggle_theme:function(){
      if(this.theme && this.theme === 'day'){
        this.theme = 'night'
        this.theme_mode = '日间模式'
      }else{
        this.theme = 'day'
        this.theme_mode = '夜间模式'
      }
    },
    // 退出
    logut:function(){
      this.pref.setString('current_user_key','')
      this.navigator.pushFull({url:'root:pages/login/import.js',animated:true})
    },
    openLeftPopup:function() {
        this.is_show = true;
      },
    //非状态组件，需要在这里关闭
    popupOverlayBottomClick:function () {
      this.is_show = false;
    }
  }
}
</script>
